<template>
  <div class="hotshops-wrapper">
    <div class="serach-wrapper">
      <Input v-model="city_name" placeholder="请输入城市名称" style="width: 300px"></Input>
      <Button :disabled="city_name.length <= 0"  @click="startGet">开始抓取</Button>
      <Button v-show="false">暂停</Button>
    </div>
    <div class="data-wrapper">
      <Table :loading="loading" border :columns="columns5" :data="list"></Table>
      <Spin fix v-if="false">
          <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
          <div>Loading</div>
      </Spin>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      city_name: '',
      loading:false,
      total_records:0,
      columns5: [
        {
            title: '店铺名',
            key: 'shopName',
            sortable: true
        },
        {
            title: '店铺ID',
            key: 'shopId'
        },
        {
            title: '上月评论数',
            key: 'last_month_coments_count',
            sortable: true
        },
        {
            title: '上月评论排名',
            key: 'last_month_coments_rank'
        },
        {
          title: '本月评论数',
          key: 'this_month_coments_count'
        },
        {
          title: '评论增长数量',
          key: 'this_month_coments_increase_count'
        },
        {
          title: '本月评论涨幅',
          key: 'this_month_coments_increase_rate'
        },
        {
            title: '涨幅排名本月',
            key: 'this_month_coments_increase_rate_rank'
        }
      ],
      list: [
       
      ]
    }
  },
  methods:{
    startGet(){
      if (this.city_name === ''){
        this.$Message.warning('请输入城市名称?');
        return;
      }
      let that = this
      that.loading = true;
      console.log('startGet')
      let url = this.city_name === ''? `http://127.0.0.1:7001/analysis/hotshops`:`http://127.0.0.1:7001/analysis/hotshops?cityname=${this.city_name}`
      axios.get(url)
      .then(function (response) {
        that.list = response.data.data;
        that.total_records = that.list.length;
        that.loading = false;
        console.log(that.list)
      })
      .catch(function (error) {
        console.log(error);
      }); 
    },
  }
}
</script>

<style>
  .hotshops-wrapper{
    padding: 20px; 
  }
  .serach-wrapper{
    padding-bottom: 20px;
  }
  .data-wrapper{
    padding-top: 20px;
  }
</style>
